import React, { useState } from 'react';
import classNames from 'classnames';
import {
  RadioChangeEvent,
  RadioGroupContextProps,
  RadioGroupProps,
  RadioValueType,
  RadioGroupSlider
} from './interface';
import Radio from './Radio';
import './style/index.less';

export const RadioGroupContext = React.createContext<RadioGroupContextProps | null>(null);
const RadioGroupContextProvider = RadioGroupContext.Provider;

const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref) => {
  const {
    id,
    className,
    style: customStyle,
    defaultValue,
    disabled,
    name,
    value: customValue,
    size: customSize,
    children,
    prefixCls = 'dt-radio-group',
    onChange,
    options,
    type = 'default',
    sliderStyle = 'outline'
  } = props;
  // const size = React.createContext(customSize);
  const [value, setValue] = useState<RadioValueType | undefined>(defaultValue);
  const [lineStyle, setLineStyle] = useState<RadioGroupSlider>({
    left: undefined,
    width: undefined
  });

  let childrenRender = children !== undefined ? children : null;
  if (options && options.length > 0) {
    childrenRender = options.map(item => (
      (typeof item === 'string' || typeof item === 'number') ? (
        <Radio
          key={item.toString()}
          disabled={disabled}
          value={item}
          checked={item === value}
        >
          {item}
        </Radio>
      ) : (
        <Radio
          key={item.label as React.Key}
          value={item.value}
          disabled={item.disabled || disabled}
          style={item.style}
          checked={item.value === value}
        >
          {item.label}
        </Radio>
      )
    ));
  }

  const onRadioChange = (e: RadioChangeEvent) => {
    if (!('customValue' in props)) {
      setValue(e.target.value);
    }
    onChange?.({
      target: {
        ...e, value: e.target.value, checked: e.target.checked
      },
      stopPropagation: e.stopPropagation,
      preventDefault: e.preventDefault
    });
  };

  const handleSlider = (e: RadioGroupSlider) => {
    setLineStyle({ ...e });
  };

  const mergedSize = customSize;

  const style = {
    ...customStyle,
    display: type === 'slider' ? 'inline-block' : 'block'
  };

  const groupClassRender = classNames(
    `${prefixCls}${`${type === 'slider' ? `-${type}` : ''}`}`,
    { [`${prefixCls}-${mergedSize}`]: mergedSize },
    className
  );

  const lineClassRender = classNames(
    `${prefixCls}-line`,
    { [`${prefixCls}-line-solid`]: sliderStyle === 'solid' }
  );

  const RadioGroupRender = (
    <div
      id={id}
      className={groupClassRender}
      style={style}
      ref={ref}
    >
      {type === 'slider' ? <div className={lineClassRender} style={lineStyle} /> : null}
      <RadioGroupContextProvider
        value={customValue ? {
          disabled,
          name,
          onChange,
          value: customValue,
          type,
          sliderStyle,
          currentTarget: handleSlider
        } : {
          disabled,
          name,
          value,
          onChange: onRadioChange,
          type,
          sliderStyle,
          currentTarget: handleSlider
        }}
      >
        {childrenRender}
      </RadioGroupContextProvider>
    </div>
  );

  return type === 'slider' ? <div>{RadioGroupRender}</div> : RadioGroupRender;
});

RadioGroup.displayName = 'RadioGroup';

export default RadioGroup;